<template>
	<view class="uni-swipe-action">
		<view class="uni-swipe-action__container" :class="!isMoving ? 'animtion' : ''" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" @touchcancel="touchEnd" @click="bindClickCont" :style="{'transform':transformX,'-webkit-transform':transformX}">
			<view class="listGood uni-swipe-action__content">
				<view class="listGood__left">
                    <view class="listGood__checked" @click="_click('checked')">
                    	<uni-icon :type="data.checked ? 'checkbox-filled' : 'circle'" size="24"></uni-icon>
                    </view>
				    <view class="listGood__label">{{ data.label }}</view>
				    <image class="listGood__img" lazy-load :src="data.imgUrl" mode="aspectFill" @tap="_click('img')"></image>
				</view>
				<view class="listGood__content">
				    <text class="listGood__title" @tap="_click('title')">{{ data.title }}</text>
				    <text class="listGood__titleSub" v-if="data.titleSub" @tap="_click('titleSub')">{{ data.titleSub }}</text>
				    <view class="listGood__sku" v-if="data.sku!=null" @tap="_click('sku')">
				        {{ data.sku[0].name }}
				        <uni-icon v-if="data.sku.length > 1" type="arrowdown" size="12" color="#fff"></uni-icon>
				    </view>
                    <view class="listGood__slot" @tap="_click('slot')">
                        <slot></slot>
                    </view>
				</view>
				<view class="listGood__bottom">
				    <view class="listGood__price" @tap="_click('price')">
				        {{ data.price }}
				        <text v-if="data.originalPrice" class="listGood__price--original">{{ data.originalPrice }}</text>
				    </view>
				    <view class="listGoodNumbox">
				        <template v-if="inputValue > 0">
				            <view class="listGoodNumbox__minus" @click="_calcValue('subtract')">-</view>
				            <input class="listGoodNumbox__value" type="number" :disabled="disabled" :value="inputValue" @blur="_onBlur" />
				            <view class="listGoodNumbox__plus" :class="{ listGoodNumbox__disabled: disableAdd }" @click="_calcValue('add')">+</view>
				        </template>
				        <template v-else>
				            <view class="listGoodNumbox__helper" :class="{ 'listGoodNumbox__helper--error': inputValue < -1 }" @tap="_click('numbox')"><slot name="numbox"></slot></view>
				        </template>
				    </view>
				</view>
			</view>
			<view class="uni-swipe-action__btn-group" :id="elId">
				<div class="uni-swipe-action--btn" style="background-color:#f0ad4e;" @click="_click('col')">
					收藏
				</div>
				<div class="uni-swipe-action--btn" style="background-color:#f76260;" @click="_click('del')">
					删除
				</div>
			</view>
		</view>
	</view>
</template>

<script>
    import uniIcon from '@/components/uni-icon/uni-icon.vue';
    
    export default {
        components:{
            uniIcon
        },
		props: {
            data: {
                type: Object,
                default: function(e) {
                    return {}
                }
            },
            index: {
                type: [Number, Array],
                default: function(e) {
                    return 0
                }
            },
			max: {
				type: Number,
				default: 99
			},
			step: {
				type: Number,
				default: 1
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
			return {
                // 滑块
				elId: elId,
				moveLength: 0,
				isMoving: false,
				direction: '',
				startX: 0,
				startY: 0,
				isShowBtn: false,
				btnGroupWidth: 0,
                // 数字按钮
                inputValue: this.data.size
			}
		},
		watch: {
			data(val) {
				this.inputValue = val.size;
			},
			inputValue(val) {
				this.$emit('change', val, this.index);
			}
		},
		computed: {
			transformX() {
				return `translateX(${this.moveLength}px)`
			},
			disableAdd() {
				return this.data.size >= this.max
			}
		},
		onReady() {
			let view = uni.createSelectorQuery().select(`#${this.elId}`);
			view.fields({
				size: true
			}, data => {
				this.btnGroupWidth = data.width;
			}).exec();
		},
		methods: {
            // 滑块
			_click(type) {
				this.$emit('click', this.index, type)
			},
			bindClickCont(e) {
				if (this.isShowBtn) {
					this.isShowBtn = false;
					this.endMove();
				}
			},
			touchStart(event) {
				this.startX = event.touches[0].pageX;
				this.startY = event.touches[0].pageY;
			},
			touchMove(event) {
				if (this.direction === 'Y') {
					return;
				}
				var moveY = event.touches[0].pageY - this.startY,
					moveX = event.touches[0].pageX - this.startX;
				if (!this.isMoving && Math.abs(moveY) > Math.abs(moveX)) { //纵向滑动
					this.direction = 'Y';
					return;
				}
				this.direction = moveX > 0 ? 'right' : 'left';
				this.isMoving = true;
			},
			touchEnd(event) {
				this.isMoving = false;
				if (this.direction !== 'right' && this.direction !== 'left') {
					this.direction = '';
					return;
				}
				if (this.direction == 'right') {
					this.isShowBtn = false
				} else {
					this.isShowBtn = true
				}
				this.endMove()
			},
			endMove() {
				if (this.direction === 'Y') {
					this.direction = '';
					return;
				}
				if (this.isShowBtn) {
					this.moveLength = -this.btnGroupWidth;
					this.$emit('opened');
				} else {
					this.moveLength = 0;
					this.$emit('closed');
				}
				this.direction = '';
			},
            // 数字按钮
			_calcValue(type) {
				const scale = this._getDecimalScale();
				let value = this.inputValue * scale;
				let step = this.step * scale;

				if (type === 'subtract') {
					value -= step
				} else if (type === 'add') {
					value += step
				}
				if (value > this.max) {
					return
				} else if (value < 1) {
					value = 1
                    this._click('del');
				}
				this.inputValue = value / scale;
			},
			_getDecimalScale() {
				let scale = 1;
				// 浮点型
				if (~~this.step !== this.step) {
					scale = Math.pow(10, (this.step + '').split('.')[1].length);
				}
				return scale;
			},
			_onBlur(event) {
				let value = event.detail.value;
				if (!value) {
					this.inputValue = 0;
					return
				}
				value = +value;
				if (value > this.max) {
					value = this.max;
				} else if (value < 1) {
					value = 1
                    this._click('del');
				}
				this.inputValue = value
			}
		}
	}
</script>

<style lang="scss">
    @import "@/style/mixin/flex.scss";
    
    .uni-swipe-action {
		width: 100%;
		overflow: hidden
	}

	.uni-swipe-action__container {
		background-color: #fff;
		width: 200%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap
	}

	.uni-swipe-action__container.animtion {
		transition: transform 350ms cubic-bezier(.165, .84, .44, 1)
	}

	.uni-swipe-action__content {
		width: 50%
	}

	.uni-swipe-action__btn-group {
		display: flex;
		flex-direction: row
	}

	.uni-swipe-action--btn {
		padding: 0 32upx;
		color: #fff;
		background-color: #c7c6cd;
		font-size: 28upx;
		display: inline-flex;
		text-align: center;
		flex-direction: row;
		align-items: center
	}
    
    
    .uni-swipe-action .listGood{
        box-sizing: border-box;
        padding-left: 272upx;
        
        .listGood__left{
            @include flex();
            left: 0;
            width: 256upx;
        
            .listGood__checked{
                padding: 0 8upx;
                width: 48upx;
                height: 192upx;
                line-height: 192upx;
                
                .uni-icon-checkbox-filled{
                    color: $uni-color-primary;
                }
                .uni-icon-circle{
                    color: $uni-text-color-grey;
                }
            }
        
            .listGood__label{
                left: 64upx;
            }
        }
    }
</style>
